<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    height="500"
    :border="false"
  >
    <el-table-column
      v-for="(column, index) in columns"
      :key="index"
      v-bind="column"
    >
      <template  slot-scope="scope">
        <template v-if="column.prop === 'typeName'">
          {{ scope.row.typeName }}
        </template>

        <template v-if="column.prop === 'pre' || column.prop === 'next'">
          <el-popover
            v-if="scope.row[column.prop]"
            :ref="`popover_row${scope.$index}_${column.prop}`"
            width="200"
            trigger="manual"
            v-model="scope.row[`popover_row${scope.$index}_${column.prop}_visible`]"
          >
            <i slot="reference" :class="scope.row.icon" @click="handleClickTag($event, column, scope)"></i>
            <div>
              <span>{{ `popover_row${scope.$index}_${column.prop}` }}</span>
            </div>
          </el-popover>
        </template>
      </template>

      <el-table-column
        v-for="(subColumn, subIndex) in column.children"
        :key="subIndex"
        v-bind="subColumn"
      >
        <template slot="header">
          <el-tooltip :content="subColumn.tooltip" placement="top">
            <span>{{ subColumn.label }}</span>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <el-popover
            v-if="scope.row[subColumn.prop]"
            :ref="`popover_row${scope.$index}_${subColumn.prop}`"
            width="200"
            trigger="manual"
            v-model="scope.row[`popover_row${scope.$index}_${subColumn.prop}_visible`]"
          >
            <i slot="reference" :class="scope.row.icon" @click="handleClickTag($event, subColumn, scope)"></i>
            <div>
              <span>{{ `popover_row${scope.$index}_${subColumn.prop}` }}</span>
            </div>
          </el-popover>
        </template>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 'row1',
          typeName: '乳腺癌在院诊断',
          pre: {
            id: 'row1_pre',
            name: 'aaa',
          },
          '2': {
            id: 'row1_2',
            name: 'bbb',
          },
          'next': {
            id: 'row1_next',
            name: 'jjj',
          },
          icon: 'el-icon-user-solid',
        },
        {
          id: 'row2',
          typeName: '乳腺癌手术',
          pre: {
            id: 'row2_pre2',
            name: 'ccc',
          },
          '1': {
            id: 'row2_1',
            name: 'ddd',
          },
          '3': {
            id: 'row2_3',
            name: 'eee',
          },
          '4': {
            id: 'row2_4',
            name: 'fff',
          },
          icon: 'el-icon-help',
        },
        {
          id: 'row3',
          typeName: '乳腺癌治疗',
          '2': {
            id: 'row3_2',
            name: 'ggg',
          },
          'next': {
            id: 'row3_next',
            name: 'hhh',
          },
          icon: 'el-icon-platform-eleme',
        },
      ],
      columns: [
        { label: '', prop: 'typeName', fixed: 'left', align: 'center', width: 180 },
        { label: '既往', prop: 'pre',  fixed: 'left', align: 'center', width: 120 },
        {
          label: '住院日历',
          prop: 'date',
          align: 'center',
          children: [
            { label: '1', prop: '1', minWidth: 120, align: 'center', tooltip: '2025-04-21' },
            { label: '2', prop: '2', minWidth: 120, align: 'center', tooltip: '2025-04-22' },
            { label: '3', prop: '3', minWidth: 120, align: 'center', tooltip: '2025-04-23' },
            { label: '4', prop: '4', minWidth: 120, align: 'center', tooltip: '2025-04-24' },
            { label: '5', prop: '5', minWidth: 120, align: 'center', tooltip: '2025-04-25' },
            { label: '6', prop: '6', minWidth: 120, align: 'center', tooltip: '2025-04-26' },
            { label: '7', prop: '7', minWidth: 120, align: 'center', tooltip: '2025-04-27' },
            { label: '8', prop: '8', minWidth: 120, align: 'center', tooltip: '2025-04-28' },
            { label: '9', prop: '9', minWidth: 120, align: 'center', tooltip: '2025-04-29' },
            { label: '10', prop: '10', minWidth: 120, align: 'center', tooltip: '2025-04-30' },
          ]
        },
        { label: '未来', prop: 'next', fixed: 'right', align: 'center', width: 120 },
      ],
      activePopoverInfo: {
        rowIndex: null,
        prop: ''
      },
      clientXY: null
    };
  },
  computed: {
    activePopoverRef() {
      return `popover_row${this.activePopoverInfo.rowIndex}_${this.activePopoverInfo.prop}`
    },
    activePopoverVisibleName() {
      return `popover_row${this.activePopoverInfo.rowIndex}_${this.activePopoverInfo.prop}_visible`
    }
  },
  methods: {
    updateActivePopoverInfo(index, prop) {
      this.activePopoverInfo.rowIndex = index;
      this.activePopoverInfo.prop = prop;
    },

    handleClickTag(event, column, scope) {
      this.clientXY = `$${event.clientX}_${event.clientY}`
      this.setPopoverVisible(scope.$index, column.prop)
    },

    setPopoverVisible(rowIndex, prop) {
      this.updateActivePopoverInfo(rowIndex, prop)
      this.tableData.forEach((item, index) => {
        const keys = Object.keys(item).filter(el => el.startsWith('popover_row') && el.endsWith('_visible'));
        keys.forEach((key) => {
          if (index !== rowIndex) {
            item[key] = false
          } else {
            item[key] = this.activePopoverVisibleName === key ? !(item[key]) : false

            // if (this.activePopoverVisibleName === key) {
            //   item[key] = !(item[key])
            // } else {
            //   item[key] = false
            // }
          }
        })
      })
    },

    closeOnClickOutside(event) {
      const clientXY = `$${event.clientX}_${event.clientY}`
      console.log(clientXY, 'clientXY---');
      if (this.clientXY !== clientXY) {
        this.setPopoverVisible(-1, null)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.setPopoverVisible(2, 'next')
      document.addEventListener('click', this.closeOnClickOutside);
    })
  },
  beforeDestroy() {
    document.removeEventListener('click', this.closeOnClickOutside);
  },
};
</script>
